<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="ID"  />
    <el-table-column prop="offic_id" label="公司ID"  />
    <el-table-column prop="name" label="角色"  />
    <el-table-column prop="role_type" label="角色类型"  />
    <el-table-column prop="data_scope" label="数据范围"  >
    <template v-slot="scope">
    {{ scope.row.data_scope==1?"全部数据":scope.row.data_scope==2?"公司数据":"个人数据" }}
    </template>
    </el-table-column>
    <el-table-column prop="role_level" label="等级"  />
    <el-table-column prop="create_by" label="添加人"  >
    <template v-slot="scope">
    {{ scope.row.create_by==6?"贺艳嵩":"管理员" }}
    </template>
    </el-table-column>
    <el-table-column prop="create_date" label="添加时间"  />
    <el-table-column prop="update_by" label="修改人"  >

    </el-table-column>
    <el-table-column prop="update_date" label="修改时间"  />
    <el-table-column prop="remarks" label="备注"  />
    <el-table-column  label="操作"  >
    <template v-slot="scope" >
        <el-link type="primary" @click="GetRoleId(scope.row.id),dialogVisible = true">分配人员</el-link>
    </template>
    </el-table-column>
  </el-table>
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
    <span>用户</span>
    <el-select
      v-model="infor.userId"
      multiple
      collapse-tags
      placeholder="Select"
      style="width: 240px"
    >
      <el-option
        v-for="item in dd"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <el-button type="primary" @click="Allocate">分配</el-button>
  </el-dialog>
</template>

<script lang="ts" setup>
import axios from 'axios';
import {ref,onMounted} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
const tableData = ref([])
onMounted(() => {
   GetShow();  
   GetSelect();
})
const Allocate=()=>{
    console.log(infor.value)
    console.log(infor.value.roleId)
    axios({
        method:"post",
        url:"http://1.117.93.87:8000/rbacxie/api/Role/UserRoleCreate",
        data:{
            userId:infor.value.userId,
            roleId:infor.value.roleId
        }
    })
    .then(res=>{
        if(res.data.code==200){
            ElMessage.success("分配成功")
        }
        else{
            ElMessage.error("分配失败")
        }
    })
}
const dd=ref([]);
const GetSelect=()=>{
    axios({
        method:"get",
        url:"http://1.117.93.87:8000/rbacdu/api/User/UserSelectShow"
    })
    .then(res=>{
        dd.value=res.data.data
        console.log(tableData.value)
    })
}
const dialogVisible = ref(false)
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('你确认关闭对话框吗')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
const GetRoleId=(id:number)=>{
infor.value.roleId=id;
}
const infor=ref({
    pageSize:10,
    pageIndex:1,
    totalPage:0,
    totalCount:0,
    roleId:"",
    userId:[]
})
const GetShow=()=>{
    axios({
        method:"get",
        url:"http://1.117.93.87:8000/rbacdu/api/Role/show",
        params:{
            pageSize:infor.value.pageSize,
            papageIndexeSize:infor.value.pageIndex
        }
    })
    .then(res=>{
        tableData.value=res.data.data.list
        infor.value.totalPage=res.data.data.totalPage
        infor.value.totalCount=res.data.data.totalCount
        console.log(res.data.data.list)
    })
}
</script>
